<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import Navbar from "/src/components/navbar.vue";
import shows from "./shows.vue";
import PNal from './person/nal.vue'
import { useStore } from '../../store/useStore'
import { updUser,getLogout } from '../../Api/user'
const store = useStore()
//引入setLetf和setRight
import setLeft from "./packs/setLeft.vue";
import setRight from "./packs/setRight.vue";
const router = useRouter();
const pack = reactive([
  { id: 1, name: '朋友圈相册' },
  { id: 2, name: '状态' }
])
let ulits = reactive([
  { id: 1, name: "服务", icons: "../image/1.png" },
  { id: 2, name: "收藏", icons: "../image/2.png" },
  { id: 3, name: "朋友圈", icons: "../image/3.png" },
  { id: 4, name: "卡包", icons: "../image/4.png" },
  { id: 5, name: "表情", icons: "../image/5.png" },
  { id: 6, name: "设置", icons: "../image/6.png" },
]);
const popupList = reactive([
  { id: 1, name: "账号与安全" },
  { id: 2, name: "青少年模式" },
  { id: 3, name: "关怀模式" },
  { id: 4, name: "新消息通知" },
  { id: 5, name: "聊天" },
  { id: 6, name: "通用" },
  { id: 7, name: "朋友圈权限" },
  { id: 8, name: "个人信息与权限" },
  { id: 9, name: "个人信息收集清单" },
  { id: 9, name: "第三方信息共享清单" },
  { id: 9, name: "插件" },
  { id: 9, name: "关于微信" },
  { id: 9, name: "帮助与反馈" },
  { id: 9, name: "关于微信" },
]);
const showRight = ref(false);
const shouRights = ref(false);


const userList = JSON.parse(localStorage.getItem('user'))
console.log(userList);

// console.log(storeList);

console.log(store.info);

// const forms = ref({
//   lnImg: store.info.avatar,
//   nclkName: store.info.nickname,
//   hao: userList.info.username,
//   imgos: '/public/微信截图_20240820093435.png'
// });
//账号切换等操作底部弹窗开关
const isshowBottom = ref(false);
//个人信息 开关
const isPersonal = ref(false);
//朋友圈开关
const isShow = ref(false)
const getTop = () => {
  isShow.value = false
}
//朋友圈高亮切换
const Ids = ref(1)
const outln = (id) => {
  Ids.value = id
}
// 二级页面头像放大开关
const isQRCode1 = ref(false);
// 二级页面二维码放大开关
const isQRCode = ref(false);
const shouaa = ref(false)
const liAll = (item) => {
  if (item.name == "设置") {
    showRight.value = true;
  } else if (item.name == "收藏") {
    shouaa.value = true
  } else if (item.name == "朋友圈") {
    isShow.value = true
  }
};
const rights = () => {
  shouRights.value = true;
};

const update = () => {
  shouaa.value = false;
};
////////////////////

//right1弹框 
const shouRight = ref(false)
const gormVal = () => {
  shouRight.value = true
}
// const isupdatesAll = ref(true)
const updatesAll = () => {
  shouRight.value = false
  // isupdatesAll.value = false
}

const updateForm = async (id, nickname) => {
  // console.log(updateForms, 1111111111);
  // forms.value = updateForms
  const res = await updUser(id, nickname)
  shouRight.value = false
}
/////////////////

const updateCk = (propValue) => {
  forms.value.nclkName = propValue.nclkName;
};

const closeshowRight = () => {
  showRight.value = false;
};

const showBottom = () => {
  isshowBottom.value = true;
};
//退出登录
const logOut = async () => {
  // console.log("退出成功");
  // localStorage.clear();
  // router.push("/login");
 
    // 调用 getLogout 函数来获取退出登录的响应  
    const res = await getLogout();  
  console.log(res);
  
    // 检查响应的状态码，以确定是否成功退出  
    if (res.data.code === 0) {  
      // 如果成功，则清空localStorage  
      localStorage.clear();  
  
      // 重定向到登录页面  
      // 假设您使用的是Vue Router或类似的路由管理库  
      router.push("/login");  
  
      // 可以选择在这里打印一些成功的消息或通知用户  
      console.log("退出登录成功，已重定向到登录页面");  
    } else {  
      // 如果退出登录失败，可以根据具体情况处理，比如显示错误信息  
      console.error("退出登录失败，状态码：" + res.code);  
      // 这里可以添加额外的错误处理逻辑，比如弹出提示框  
      alert("退出登录失败，请稍后再试！");  
    }  
  
   
};
//关闭微信
const CloseWechat = () => {
  window.location.href = "http://192.168.0.130:3000/swagger";
};

const closesPersonal = () => {
  isPersonal.value = false;
};
const personal = async() => {
  isPersonal.value = true;
  // console.log(11111111);
    
};

const QRCode = () => {
  isQRCode.value = true;
  console.log(111);
};

const QRCode1 = () => {
  isQRCode1.value = true;
  console.log(111);
};
</script>
<template>
  <div class="apps">
    <div class="shous">
      <div class="shou_y" @click="personal">
        <div class="chilt">
          <img :src="store.info.avatar" alt="" />
        </div>
        <div class="chilt_l">
          <h2>{{ store.info.nickname }}</h2>
          <div class="xin">
            <p class="wei">
              微信号：<span>{{ store.info.username }}</span>
            </p>
            <div class="wei_xins" @click="rights">
              <p></p>
              <p>&gt;</p>
            </div>
          </div>
        </div>
      </div>
      <div class="shou_d">
        <p></p>
        <p></p>
      </div>
      <div class="xian"></div>
    </div>
    <div class="rights">
      <!-- <van-cell :title="item.name" :icon="item.icons"  v-for="item in ulits" 
      :key="item.id"
      @click="liAll(item)" is-link/> -->
      <li v-for="item in ulits" :key="item.id" @click="liAll(item)">
        <div class="left">
          <img :src="item.icons" alt="" />
          <div class="poe">{{ item.name }}</div>
        </div>
        <div class="right">&gt;</div>
      </li>
    </div>
    <van-popup v-model:show="showRight" position="right"
      :style="{ width: '100%', height: '100%', background: '#f5f5f5' }">
      <Navbar title="设置" showLeft="true" @closeshowRight="closeshowRight" />
      <div v-for="item in popupList" :key="item.id">
        <van-cell :title="item.name" is-link />
      </div>
      <div class="popupBut">
        <van-button>切换账号</van-button>
        <van-button @click="showBottom">退出</van-button>
      </div>
    </van-popup>
    <Transition name="slide-left" mode="out-in">
      <shows v-if="shouaa" @update="update" />
    </Transition>
    <Transition name="slide-left" mode="out-in">
      <Personal v-if="shouRights" @updates="updates" :forms="forms" @updateCk="updateCk" />
    </Transition>
  </div>
  <!-- 底部退出 -->
  <van-popup v-model:show="isshowBottom" position="bottom" round :style="{ height: '25%' }">
    <div class="popupDiv">
      <div @click="logOut">退出登录</div>
      <div @click="CloseWechat">关闭微信</div>
      <div @click="() => (isshowBottom = false)">取消</div>
    </div>
  </van-popup>
  <!-- 个人信息 -->
  <van-popup v-model:show="isPersonal" position="right" :style="{ width: '100%', height: '100%' }">
    <Navbar title="个人信息" showLeft="true" @closeshowRight="closesPersonal" />
    <van-cell title="头像">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-image width="50" height="50" :src="store.info.avatar" @click="QRCode1" />
        <van-icon name="arrow" style="line-height: 50px; font-size: 15px;color: rgb(157, 151, 153);" />
      </template>
    </van-cell>
    <van-cell title="名字" is-link :value="store.info.nickname" @click="gormVal">
    </van-cell>
    <van-cell title="拍一拍" is-link />
    <van-cell title="微信号" is-link :value="store.info.username" />
    <van-cell title="二维码名片" is-link>
      <template #right-icon>
        <img :src="store.info.avatar" alt="" style="width: 15px; height: 15px" @click="QRCode" />
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell title="更多信息" is-link />
    <van-cell title="来电铃声" is-link />
    <van-cell title="微信豆" is-link />
    <van-cell title="我的地址" is-link />
  </van-popup>
  <van-popup v-model:show="isQRCode" round :style="{ padding: '2px' }">
    <img :src="store.info.avatar" alt="" style="width: 300px; height: 300px" />
  </van-popup>
  <van-popup v-model:show="isQRCode1" round :style="{ padding: '0px' }">
    <img :src="store.info.avatar" alt="" style="width: 300px; height: 300px" />
  </van-popup>

  <!--朋友圈弹框-->
  <van-popup v-model:show="isShow" position="right" :style="{ width: '100%', height: '100%' }">
    <div class="topNav">
      <van-icon name="arrow-left" @click="getTop" />
      <span style="font-weight: bold;">相册</span>
      <div></div>
    </div>
    <div class="packUp">
      <p :class="item.id == Ids ? 'active' : ''" v-for="item in pack" @click="outln(item.id)">{{ item.name }}</p>
    </div>
    <div class="setBottom">
      <setLeft v-if="Ids == 1" />
      <setRight v-if="Ids == 2" />
    </div>
  </van-popup>
  <!-- ////////////// -->
  <PNal v-if="shouRight" @updates="updatesAll" :forms="forms" @updateForm="updateForm" />
</template>
<style scoped>
.active {
  color: rgb(55, 171, 49);
  border-bottom: 2px solid rgb(55, 171, 49);
}

.packUp {
  height: 50px;
  display: flex;
  border-bottom: 1px solid #afafaf;

  p {
    width: 50%;
    text-align: center;
    line-height: 50px;
  }
}

.topNav {
  display: flex;
  width: 100%;
  height: 50px;
  padding: 0 10px 0 10px;
  justify-content: space-between;
  align-items: center;
}

.tom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}

.popupDiv {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.popupDiv div {
  width: 100%;
  height: 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.popupDiv div:nth-child(3) {
  border-bottom: none;
}

/* 定义进入动画的 CSS 类 */
.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(100%);
  /* 初始位置在右侧 */
}

.slide-left-enter-to,
.slide-left-leave-from {
  transform: translateX(0);
  /* 目标位置在原位 */
}

.topNav {
  display: flex;
  width: 100%;
  height: 50px;
  padding: 0 10px 0 10px;
  justify-content: space-between;
  align-items: center;
  background-color: #ccc;
}

.popupBut {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
  flex-direction: column;
}

.xian {
  width: 336px;
  height: 1px;
  position: absolute;
  top: 161px;
  box-shadow: 0 1px 0 rgba(219, 217, 217, 0.2) inset,
    0 -1px 0 rgba(224, 222, 222, 0.2) inset;
}

.xin {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.wei {
  font-size: 13px;
}

.wei_xins {
  width: 60px;
  display: flex;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 20px;
}

.wei_xins p:nth-child(2) {
  font-size: 18px;
  color: #787777;
}

.shou_d {
  height: 13vh;
  /* background-color: antiquewhite; */
}

.shou_y {
  height: 11vh;
  display: flex;
  justify-content: space-between;
}

.chilt_l {
  width: 260px;

  h3 {
    color: #fff;
  }
}

.chilt {
  width: 60px;
  height: 60px;
  border-radius: 10px 10px 10px 10px;

  img {
    width: 60px;
    height: 60px;
    border-radius: 10px 10px 10px 10px;
  }
}

.apps {
  width: 57vh;
  height: 100vh;
  background-color: #eeecec;
}

.shous {
  padding: 90px 20px 0px 20px;
  width: 57vh;
  height: 38vh;
  background-image: url("https://tse4-mm.cn.bing.net/th/id/OIP-C.CksA9RIx8se4xO38vVsmIAHaEo?w=252&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7");
  background-size: cover;
  position: relative;
}

.rights {
  li {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    img {
      margin-left: 14px;
      width: 20px;
      height: 20px;
    }
  }
}

.rights li:nth-child(2) {
  margin-top: 10px;
}

.rights li:nth-child(1) {
  margin-top: 10px;
}

.rights li:nth-child(3) {
  border-bottom: 1px solid #ccc;
}

.rights li:nth-child(6) {
  margin-top: 10px;
}

.left {
  width: 110px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  align-items: center;
  flex-direction: row;
}

.right {
  width: 30px;
  text-align: center;
  line-height: 43px;
  font-size: 18px;
  padding-right: 35px;
  color: #a9a6a6;
}

.poe {
  width: 62px;
  margin-left: 15px;
}
</style>
